<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" href="/css/iconfont.css">
	<link rel="stylesheet" href="/css/global.css">
	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="/css/login.css">
	<script src="/js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="/js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="/js/jquery.form.js" charset="UTF-8"></script>
	<script src="/js/global.js" charset="UTF-8"></script>
	<script src="/js/login.js" charset="UTF-8"></script>
	<title>XXX - 登录 / 注册</title>
	<script src="/js/vue.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/js/layui/layui.js"></script>
	<script type="text/javascript">
		/* 注册layui */
		layui.use('layer', function () {
			var layer = layui.layer;
		});

		layui.use('laydate', function(){
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem: '#test1' //指定元素
			});
		});
		axios.defaults.withCredentials = true;

		$(function(){
			new Vue({
				el: "#app",
				data: {
					name:"",
					password:"",
					user: {},
					confirm:"",
					account:"",
					code:"",
					newpwd:"",
					confirmpassword:"",
				},
				methods:{
					setUser(){
						localStorage.setItem("user666",JSON.stringify(this.user));
					},
					restartPwd(){
						this.user.password=this.newpwd;
						if (this.user.id==""){
							layer.alert("请先获取验证码!", {
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
						}
						axios.get(
								"http://192.168.6.125:8080/user/restartPwd",{
									params: {
										userId:this.user.id,
										newpwd: this.newpwd,
										code:this.code
									},
									timeout: 1000,
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									}
								}
						).then(response=> {
							if (response.data.code==200) {
								layer.msg("重置成功!")
								$('.register').hide();
								$('.resetpwd').hide();
								this.account="";
								this.code="";
								this.newpwd="";
								this.user={}
							}else{
								layer.alert(response.data.msg, {
									shade: 0,
									icon: 5,
									skin: 'layer-ext-demo' //见：扩展说明
								})
							}
						})

					},
					sendMail(){
						if (this.account==""){
							layer.alert('用户名不能为空',{
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}

						axios.post(
								"http://192.168.6.125:8080/user/sendMail",{name:this.account}
						).then(response=> {
							if (response.data.code==200) {
								layer.msg("发送成功!")
								this.user = response.data.data;
							}else{
								layer.alert(response.data.msg, {
									shade: 0,
									icon: 5,
									skin: 'layer-ext-demo' //见：扩展说明
								})
							}
						})



					},
					login(){
						axios.post(
								"http://192.168.6.125:8080/user/login",{name: this.name, password:this.password}
						).then(response=> {
							if (response.data.code==200) {
								this.setUser();
								localStorage.setItem("userz", JSON.stringify(response.data.data))
								location.href="/index.html";
							}else{
								layer.alert(response.data.msg, {
									shade: 0,
									icon: 5,
									skin: 'layer-ext-demo' //见：扩展说明
								})
							}
						})
					},
					register(){
						$('.register').show();
					},
					returnLogin(){
						$('.register').hide();
						$('.resetpwd').hide();
					},
					forget(){
						$('.resetpwd').show();
					},
					toRegister(){
						if (this.user.name==""){
							layer.alert('用户名不能为空',{
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}else if (this.user.password==""){
							layer.alert('密码不能为空',{
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}else if (this.user.mail==""){
							layer.alert('邮箱不能为空',{
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}else if (this.confirmpassword==""){
							layer.alert('密码不能为空',{
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}else if (this.confirm==false){
							layer.alert('请阅读同意用户协议!',{
								shade: 0,
								icon: 5,
								skin: 'layer-ext-demo' //见：扩展说明
							})
							return;
						}
						axios.post(
								"http://192.168.6.125:8080/user/resgister",this.user
						).then(response=> {
							if (response.data.code==200) {
								$('.register').hide();
								$('.resetpwd').hide();
								layer.msg("注册成功!")
								this.password = "";
							}else{
								layer.alert(response.data.msg, {
									shade: 0,
									icon: 5,
									skin: 'layer-ext-demo' //见：扩展说明
								})
							}
						})
					}
				},
				mounted: function () {
					$('.login').show();

				}
			});
		})
	</script>
</head>
<body>
	<div class="public-head-layout container">
		<a class="logo" href="/index.html"><img src="/images/icons/logo.jpg" alt="XXX" class="cover"></a>
	</div>

	<div id="app">
	<div style="background:url(/images/login_bg.jpg) no-repeat center center; ">
		<div class="login-layout container">
			<div class="form-box login">
				<div class="tabs-nav">
					<h2>欢迎登录平台</h2>
				</div>
				<div class="tabs_container">
					<form class="tabs_form" action="/user/login" method="post" id="login_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
								</div>
								<input class="form-control phone" v-model="name" name="name" id="login_account" required placeholder="账号" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
								</div>
								<input class="form-control password" v-model="password" name="password" id="login_pwd" placeholder="请输入密码" autocomplete="off" type="password">
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        </label>
	                        <a href="javascript:;" class="pull-right" @click="forget" id="resetpwd">忘记密码？</a>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="login_error">
								<!-- 错误信息 范例html
								<div class="alert alert-warning alert-dismissible fade in" role="alert">
									<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
									<strong>密码错误</strong> 请重新输入密码
								</div>
								 -->
							</div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block submit" id="login_submit" @click="login" type="button">登录</button><br>
	                    <p class="text-center">没有账号？<a href="javascript:void(0)" @click="register" id="register">免费注册</a></p>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">登录成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="../static/index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="../static/udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<div class="form-box register">
  				<div class="tabs-nav">
  					<h2>欢迎注册<a href="javascript:;" class="pull-right fz16" @click="returnLogin" id="reglogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form" action="../static/index.html" method="post" id="register_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon" aria-hidden="true"></span>
								</div>
								<input class="form-control" v-model="user.name" name="name" id="register_phone" required placeholder="用户名" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>

						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon" aria-hidden="true"></span>
								</div>
								<input class="form-control" v-model="user.email" name="name"  required placeholder="邮箱号"  autocomplete="off" type="email">
							</div>
						</div>

						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon" aria-hidden="true"></span>
								</div>
								<input class="form-control" name="name" v-model="user.password"  required placeholder="请输入密码" maxlength="11" autocomplete="off" type="password">
							</div>
						</div>

						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
									<span class="glyphicon" aria-hidden="true"></span>
								</div>
								<input class="form-control" name="name"  v-model="confirmpassword" required placeholder="请确认密码" maxlength="11" autocomplete="off" type="password">
							</div>
						</div>
						<div class="checkbox">
	                        <label>
	                        	<input checked="" id="register_checkbox" v-model="confirm" type="checkbox"><i></i> 同意<a href="../static/temp_article/udai_article3.html">XXX用户协议</a>
	                        </label>
	                    </div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="register_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block"  @click="toRegister" type="button">注册</button>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">注册成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="../static/index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="../static/udai_welcome.html" class="btn btn-block btn-lg btn-info">登录会员中心</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
			<div class="form-box resetpwd">
  				<div class="tabs-nav clearfix">
  					<h2>找回密码<a href="javascript:;" class="pull-right fz16" @click="returnLogin" id="pwdlogin">返回登录</a></h2>
  				</div>
  				<div class="tabs_container">
					<form class="tabs_form" action="https://rpg.blue/member.php?mod=logging&action=login" method="post" id="resetpwd_form">
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
								</div>
								<input class="form-control phone" name="phone" v-model="account" id="resetpwd_phone" required placeholder="账号" maxlength="11" autocomplete="off" type="text">
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<input class="form-control" name="sms" id="resetpwd_sms" v-model="code" placeholder="输入验证码" type="text">
								<span class="input-group-btn">
									<button class="btn btn-primary getsms" @click="sendMail" type="button">发送邮箱验证码</button>
								</span>
							</div>
						</div>
						<div class="form-group">
							<div class="input-group">
								<div class="input-group-addon">
								</div>
								<input class="form-control password" name="password" v-model="newpwd"  placeholder="新的密码" autocomplete="off" type="password">
							</div>
						</div>
	                    <!-- 错误信息 -->
						<div class="form-group">
							<div class="error_msg" id="resetpwd_error"></div>
						</div>
	                    <button class="btn btn-large btn-primary btn-lg btn-block " @click="restartPwd" id="resetpwd_submit" type="button">重置密码</button>
                    </form>
                    <div class="tabs_div">
	                    <div class="success-box">
	                    	<div class="success-msg">
								<i class="success-icon"></i>
	                    		<p class="success-text">密码重置成功</p>
	                    	</div>
	                    </div>
	                    <div class="option-box">
	                    	<div class="buts-title">
	                    		现在您可以
	                    	</div>
	                    	<div class="buts-box">
	                    		<a role="button" href="../static/index.html" class="btn btn-block btn-lg btn-default">继续访问商城</a>
								<a role="button" href="login.html" class="btn btn-block btn-lg btn-info">返回登陆</a>
	                    	</div>
	                    </div>
                    </div>
                </div>
			</div>
		</div>
		</div>
		</div>
<!--			<script>-->
<!--				$(document).ready(function() {-->
<!--					// 判断直接进入哪个页面 例如 login.php?p=register-->
<!--					switch($.getUrlParam('p')) {-->
<!--						case 'register': $('.register').show(); break;-->
<!--						case 'resetpwd': $('.resetpwd').show(); break;-->
<!--						default: $('.login').show();-->
<!--					};-->
<!--					// 发送验证码事件-->
<!--					$('.getsms').click(function() {-->
<!--						var phone = $(this).parents('form').find('input.phone');-->
<!--						var error = $(this).parents('form').find('.error_msg');-->
<!--						switch(phone.validatemobile()) {-->
<!--							case 0:-->
<!--								// 短信验证码的php请求-->
<!--								error.html(msgtemp('验证码 <strong>已发送</strong>','alert-success'));-->
<!--								$(this).rewire(60);-->
<!--							break;-->
<!--							case 1: error.html(msgtemp('<strong>手机号码为空</strong> 请输入手机号码',    'alert-warning')); break;-->
<!--							case 2: error.html(msgtemp('<strong>手机号码错误</strong> 请输入11位数的号码','alert-warning')); break;-->
<!--							case 3: error.html(msgtemp('<strong>手机号码错误</strong> 请输入正确的号码',  'alert-warning')); break;-->
<!--						}-->
<!--					});-->
<!--					// 以下确定按钮仅供参考-->
<!--					$('.submit').click(function() {-->
<!--						var form = $(this).parents('form')-->
<!--						var phone = form.find('input.phone');-->
<!--						var pwd = form.find('input.password');-->
<!--						var error = form.find('.error_msg');-->
<!--						var success = form.siblings('.tabs_div');-->
<!--						var options = {-->
<!--							beforeSubmit: function () {-->
<!--								console.log('喵喵喵')-->
<!--							},-->
<!--							success: function (data) {-->
<!--								console.log(data)-->
<!--							}-->
<!--						}-->
<!--						// 验证账号参考这个-->
<!--						switch(phone.validatemobile()) {-->
<!--							case 1: error.html(msgtemp('<strong>账号为空</strong> 请输入账号',    'alert-warning')); return; break;-->
<!--							case 2: error.html(msgtemp('<strong>账号输入有误</strong> 请输入正确长度的账号','alert-warning')); return; break;-->
<!--						}-->
<!--						// 验证密码复杂度参考这个-->
<!--						switch(pwd.validatepwd()) {-->
<!--							case 1: error.html(msgtemp('<strong>密码不能为空</strong> 请输入密码',    'alert-warning')); return; break;-->
<!--							case 2: error.html(msgtemp('<strong>密码过短</strong> 请输入6位以上的密码','alert-warning')); return; break;-->

<!--						}-->
<!--						form.ajaxForm(options);-->
<!--						// 请求成功执行类似这样的事件-->
<!--						// form.fadeOut(150,function() {-->
<!--						// 	success.fadeIn(150);-->
<!--						// });-->
<!--					})-->
<!--				});-->
<!--			</script>-->
		</div>
	</div>
	<div class="footer-login container clearfix">
		<ul class="links">
			<a href=""><li>网店代销</li></a>
			<a href=""><li>U袋学堂</li></a>
			<a href=""><li>联系我们</li></a>
			<a href=""><li>企业简介</li></a>
			<a href=""><li>新手上路</li></a>
		</ul>
		<!-- 版权 -->
		<p class="copyright">
			© 2005-2017 XXX 版权所有，并保留所有权利<br>
			ICP备案证书号：闽ICP备XXX号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市XXX&nbsp;&nbsp;&nbsp;&nbsp;Tel: XXX&nbsp;&nbsp;&nbsp;&nbsp;E-mail: XXX@qq.com
		</p>
	</div>
</body>
</html>